<template>
  <div>
       <!-- <div class="man_top">
      <div class="man_top_left"><span class="s1">tzz典当管理平台</span></div>
      <div class="man_top_right"><span>欢迎来到后台管理系统，{{user.accountUsername}}</span></div>
    </div> -->
    <div class="manager-top">
      <div class="manager-top-left">
      <span class="s1">tzz典当管理平台</span>
      </div>
      <div class="manager-top-right">
        <span>欢迎你，{{user.accountUsername}}</span>
        <button @click="changePass">修改密码</button>
        <button @click="logout">退出</button>
      </div>
    </div>
    <div class="manager-nav">
      <el-menu>
        <manager2 :menus="menus"></manager2>
      </el-menu>
    </div>
    <div class="manager-content">
      <router-view></router-view>
    </div>

    <!-- 修改密码 -->
    <el-dialog title="修改密码" :visible.sync="changePassDialogVisible">
      <div>
          当前密码：<el-input show-password v-model="oldpassword" placeholder="请输入旧密码"></el-input>
          新密码：<el-input show-password v-model="newpassword" placeholder="请输入新密码"></el-input>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="changePassSave">提交</el-button>
      </div>
    </el-dialog>

    <!--
   <div class="man_left">
      <el-menu default-active="2">
         <manager2 :menus="menus"></manager2>
      </el-menu>
    </div>
    <div class="man-right">
      <router-view />
    </div> -->
  </div>


</template>

<script>
  export default {
    name: 'manager',
    components: {
      manager2: () => import('./Manager2.vue')
    },
    data() {
      return {
        user: JSON.parse(localStorage.getItem("loginAccount")),
        menus: [],
        oldpassword: "",
        newpassword: "",
        changePassDialogVisible: false
      }
    },
    methods: {
      // 得到所有的菜单对象渲染到主页
      getAllMenus() {
        this.$http.get("/menus/findMenus",{params:{accountId:this.user.accountId}}).then(resp => {
          this.menus = resp.data.data;
          console.log(this.menus);
        })
      },
      logout() {
        this.$http.get("/logout").then(resp => {
          console.log(resp)
          localStorage.removeItem("loginAccount")
          location.reload();
        })
      },
      changePassSave() {
        console.log(this.user)
        var params = new URLSearchParams();
        params.append("username", this.user.accountUsername);
        params.append("password", this.oldpassword);
        this.$http({
          method: "POST",
          url: '/login',
          data: params,
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          }
        }).then(resp => {
          console.log(resp)
          if (resp.data.flag == true) {
            if(this.oldpassword!=this.newpassword){
              this.$http.get("/account/updatePassword", {
                params: {
                  accountId: this.user.accountId,
                  accountPass: this.newpassword
                }
              }).then(resp => {
                alert("修改成功")
                this.oldpassword = ""
                this.newpassword = ""
                this.changePassDialogVisible = false
              })
            }
            else{
              alert("新密码不能与旧密码相同")
              this.oldpassword = ""
              this.newpassword = ""
            }

          } else {
            alert("原密码错误")
            this.oldpassword = ""
            this.newpassword = ""
          }
        })


      },
      changePass() {
        console.log(this.user)
        this.changePassDialogVisible = true
      },
    },
    created() {
      this.getAllMenus();
      console.log(JSON.parse(localStorage.getItem("loginAccount")))
    }
  }
</script>
<style>
   /* * {
    margin: 0px;
    padding: 0px;
  }

  .man_top {
    position: absolute;
    top: 0px;
    height: 50px;
    width: 100%;
  }

  .s1 {
    position: absolute;
    left: 10px;
    top: 25px;
    font-size: 30px;
    color: aliceblue;
    margin: 0;
  }

  .man_top_right {
    position: absolute;
    height: 100px;
    left: 20%;
    width: 80%;
    background-color: #42B983;
  }

  .man_top_left {
    position: absolute;
    height: 100px;
    width: 20%;
    background-color: #2C3E50;
  }

  .man_left {
    position: absolute;
    top: 100px;
    width: 20%;
    height: 600px;
  }

  .man-right {
    position: absolute;
    top: 100px;
    left: 20%;
  } */

  .manager-top {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100px;
    background-color: aquamarine;
  }

  .manager-nav {
    position: absolute;
    top: 100px;
    bottom: 0;
    width: 260px;
    background-color: aliceblue;
  }

  .manager-content {
    position: absolute;
    top: 100px;
    left: 260px;
    bottom: 0;
    right: 0;
  }

  .manager-top-right {
    float: right;
    height: 100px;
  }

  .manager-top-left {
    float: left;
    height: 100px;
  }
</style>
